<template>
  <div class="proxy-work-container">

    <div class="proxy-work-search-box">
      <img src="./location.png" class="search-pic1" onclick="return false"/>
      <span class="search-city" @click="openSearchCity">{{address}}</span>
      <div class="search-con">
        <img src="./search.png" class="search-pic2" onclick="return false"/>
        <span class="search-name" @click="openSearchKey">请输入企业名称或关键字</span>
      </div>
    </div>


    <div class="proxy-work-box">

      <!--筛选-->
      <div class="roll-screen-box" id="searchHeight" :class="{'roll-fixed-box':isFixed}">

        <div class="screen-condition-box">
          <span class="condition-title">企业列表</span>
          <div class="condition-content">
            <div class="icon-box" :class="{'choose':showScreen2}" @click="openCompanyModal">{{screenTitle1}}
              <img src="./drop_down_sel.png" class="screen-pic1" v-if="showScreen2" onclick="return false"/>
              <img src="./drop_down.png" class="screen-pic1" onclick="return false" v-else>
            </div>
            <div class="icon-box" :class="{'choose':showScreen1}" @click="openPostModal">{{screenTitle2}}
              <img src="./drop_down_sel.png" class="screen-pic1" v-if="showScreen1" onclick="return false"/>
              <img src="./drop_down.png" class="screen-pic1" onclick="return false" v-else>
            </div>
          </div>

          <div class="screen-cover-box1" v-show="showScreen1" @click="closePostModal" @touchmove.prevent></div>
          <div class="screen-modal" v-show="showScreen1">
            <div class="screen-con">
              <div class="content-sec">
                <div class="sec" @click="queryWorkType(2,'全部工种')" :class="{'active2':workType == 2}">全部工种
                  <img src="./get.png" v-if="workType == 2" class="screen-pic2" onclick="return false"/>
                </div>
                <div class="sec" @click="queryWorkType(1,'小时工')" :class="{'active2':workType == 1}">小时工
                  <img src="./get.png" v-if="workType == 1" class="screen-pic2" onclick="return false"/>
                </div>
                <div class="sec" @click="queryWorkType(0,'正式工')" :class="{'active2':workType == 0}">正式工
                  <img src="./get.png" v-if="workType == 0" class="screen-pic2" onclick="return false"/>
                </div>
              </div>
            </div>
          </div>

          <div class="screen-cover-box2" v-show="showScreen2" @click="closeCompanyModal" @touchmove.prevent></div>
          <div class="company-modal" v-show="showScreen2">
            <div class="screen-con">
              <div class="content-sec">
                <div class="sec" @click="selectMechanism('all','全部企业')" :class="{'active2':mechanismType == 'all'}">
                  全部企业
                  <img src="./get.png" v-if="mechanismType == 'all'" class="screen-pic2" onclick="return false"/>
                </div>
                <div class="sec" v-for="(item,i) in mechanismList" :key="i"
                     @click="selectMechanism(item.id,item.mechanismTypeName)"
                     :class="{'active2':item.id == mechanismType}">{{item.mechanismTypeName}}
                  <img src="./get.png" v-if="item.id == mechanismType" class="screen-pic2" onclick="return false"/>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="select-condition-box">
          <div class="select-key" :class="{'active':orderType == '10'}" @click="querySelectType(10)">在招企业</div>
          <div class="select-key" :class="{'active':orderType == '8'}" @click="querySelectType(8)">高薪企业</div>
          <div class="select-key" :class="{'active':orderType == '9'}" @click="querySelectType(9)">有返费</div>
          <div class="select-key" :class="{'active':orderType == '4'}" @click="querySelectType(4)">可借支</div>
        </div>
      </div>

      <!--招聘-->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="proxy-work-list-van"
      >
        <div class="proxy-work-list-box">

          <div class="proxy-work-list-item" v-for="(item,index) in workList" :key="index"
               @click="openWorkDetail(item.id)">

            <div class="work-logo-box">
              <div class="logo-con">
                <img :src="item.mechanismUrl?item.mechanismUrl:require('./pld_logo.png')" class="logo-pic"
                     onclick="return false"/>
                <span class="logo-title" v-show="item.isApply == 0">已报名</span>
                <span class="logo-full" v-show="item.status == 1">待招聘</span>
              </div>
              <div class="star-box">
                <img src="./star.png" class="star-pic"/><span class="star-score">{{item.mechanismScore}}分</span>
              </div>
            </div>

            <div class="work-item-con">
              <div class="work-item-content1">
                <div class="company-box">
                  <span class="company-name"
                        v-if="item.postType == 0 && item.reStatus == 1 && item.reMoney > 0 && item.reTime > 0">{{item.mechanismName}}</span>
                  <span class="company-name"
                        v-else-if="item.postType == 1 && item.reStatus == 1 && item.addWorkMoney > 0 && item.reTime > 0">{{item.mechanismName}}</span>
                  <span class="company-name company-all-length" v-else>{{item.mechanismName}}</span>
                  <span class="company-post">{{item.workTypeName}}&nbsp;&nbsp;({{item.postName}})</span>
                </div>
                <div class="prize-con-box1"
                     v-if="item.postType == 0 && item.reStatus == 1 && item.reMoney > 0 && item.reTime > 0">
                  <img src="./return_bg.png" class="return-fee-pic"/>
                  <span class="return-fee-num">{{item.reMoney}}元</span>
                </div>
                <div class="prize-con-box2"
                     v-if="item.postType == 1 && item.reStatus == 1 && item.addWorkMoney > 0 && item.reTime > 0">
                  <img src="./return_bg2.png" class="return-fee-pic"/>
                  <span class="return-fee-num">{{Math.floor(item.addWorkMoney * 10) / 10}}元/时</span>
                </div>
              </div>
              <div class="work-item-content2">
                <span class="work-num">招{{item.maxNumber}}人</span>&nbsp;<span v-if="item.status != 1" class="work-num">/&nbsp;已报名{{item.applyNumber}}人</span>
                <span class="work-money" v-if="item.postType == 0">{{item.wageRange}}元/月</span>
                <span class="work-money" v-if="item.postType == 1">{{item.workMoney}}元/时</span>
              </div>
              <div class="work-item-content3">
                <span class="work-lend" v-show="item.lendType == 1">可借支</span>
                <span class="work-sex" v-if="item.age">{{item.age}}</span>
              </div>
              <div class="work-item-content4">
                <span class="work-key" v-if="item.key.length > 0" v-for="(val,k) in item.key" :key="k">{{val}}</span>
              </div>
            </div>

          </div>
        </div>
      </van-list>

    </div>

    <div class="empty-wrap" v-if="workList.length == 0 && !loading">
      <div class="empty-box">
        <img src="../../../assets/img/empty.png" class="empty-pic" onclick="return false"/>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <div class="work-mask_transparent-toast" v-if="showToast"></div>

    <!--登录注册弹出层-->
    <div class="login-phone-cover" v-if="showModal == 1" @click="closeLoginModal"></div>
    <div class="login-phone-modal" v-if="showModal == 1" @touchmove.prevent>
      <div class="login-phone-box">
        <div class="phone-title1">
          <span class="login-title" :class="{'active-mark':showPage == 1}" @click="openLogin">登录</span>
          <span class="register-title" :class="{'active-mark':showPage == 2}" @click="openRegister">注册</span>
        </div>
        <div class="login-phone-con" v-if="showPage == 1">
          <div class="phone-title2">
            <span class="title1">手机号:</span>
            <div class="content">
              <input type="text" maxlength="11" class="phone" v-model="loginPhone" placeholder="请输入手机号"/>
            </div>
          </div>
          <div class="phone-title2">
            <div><span class="title1">密</span><span class="title2">码:</span></div>
            <div class="content">
              <input type="password" maxlength="16" class="phone" v-model="loginPwd" placeholder="请输入密码"/>
            </div>
          </div>

          <button type="button" class="phone-btn" @click="proxyLogin">登&nbsp;&nbsp;录</button>

          <span class="forget-pwd" @click="openForgetPwd">忘记密码?</span>
        </div>


        <div class="register-phone-con" v-if="showPage == 2">
          <div class="phone-title2">
            <span class="title1">手机号:</span>
            <div class="content">
              <input type="text" maxlength="11" class="phone" v-model="registerPhone" placeholder="请输入手机号"/>
            </div>
          </div>
          <div class="phone-title2">
            <span class="title1">验证码:</span>
            <div class="content">
              <input type="text" maxlength="6" class="code" placeholder="请输入验证码" v-model="codeNum"/>
            </div>
            <v-code ref="timerBtn" class="code_txt" v-on:run="sendCode">获取验证码</v-code>
          </div>
          <div class="phone-title2">
            <div><span class="title1">密</span><span class="title2">码:</span></div>
            <div class="content">
              <input type="password" maxlength="16" class="phone" v-model="registerPwd1" placeholder="请输入密码"/>
            </div>
          </div>
          <div class="phone-title2">
            <span class="title1">确认密码:</span>
            <div class="content">
              <input type="password" maxlength="16" class="phone" v-model="registerPwd2" placeholder="请确认密码"
                     @blur="inputBlur"/>
            </div>
          </div>

          <button type="button" class="phone-btn" @click="proxyRegister">注&nbsp;&nbsp;册</button>
        </div>


        <!--<img src="./close2.png" class="close-box" @click="closeLoginModal" onclick="return false"/>-->
      </div>
    </div>

    <!--注册成功弹出层-->
    <div class="success-modal" v-show="showSuccess">
      <div class="success-box">
        <div class="bg-box"><img src="./apply_bg.png" class="bg" onclick="return false"/></div>
        <div class="title">恭喜您，注册成功</div>
        <div class="suc-btn">
          <button type="button" class="detail" @click="download">下载APP查看招工信息</button>
        </div>
        <img src="./close.png" class="close" @click="closeSuccess" onclick="return false"/>
      </div>
    </div>

  </div>

</template>

<script>
  import {baseUrl} from "../../../config/env";
  import {getSessionStore, getUrlKey, removeSessionStore, setSessionStore} from "../../../config/util";
  import {Base64} from 'js-base64';
  import code from '../../../components/code';
  import {checkCode, checkPhone, checkPwd} from "../../../config/verify";
  import md5 from 'js-md5';

  export default {
    inject: ['reload'],
    data() {
      return {
        userSign: "",
        address: "",
        showScreen1: false,
        showScreen2: false,
        isFixed: false,//bar浮动
        offsetTop: 0,//触发bar浮动的阈值
        screenTitle1: "全部企业",
        screenTitle2: "全部工种",
        screenMark: true,
        workType: 2,
        mechanismType: "all",
        mechanismList: [],
        orderType: "",
        workList: [],
        currentPage: 1,
        pageSize: 20,
        loading: false,
        finished: false,
        identity: "",
        mechanismName: "",
        mobile: "",
        weChatNum: "",
        showToast: false,
        origin: getUrlKey("origin"),
        sginMark: 2,
        showModal: 1,
        loginPhone: "",
        loginPwd: "",
        showPage: 1,
        registerPhone: "",
        registerPwd1: "",
        registerPwd2: "",
        codeNum: "",
        token1: "",
        token2: "",
        showSuccess: false,
      }
    },
    created() {
      this.address = this.$route.query.address;
      if (this.address == "" || this.address == undefined || this.address == null) {
        this.address = "全国";
      }
      if (getSessionStore("user_sign")) {
        this.userSign = Base64.decode(getSessionStore("user_sign"));
        this.sginMark = 1;
        this.showModal = 2;
      }
      if (this.origin) {
        setSessionStore("origin", this.origin);//平台区分
      }
      this.getIdentity();
      this.queryMechanism();
    },
    mounted() {
      let searchHeight = document.querySelector('#searchHeight').clientHeight;//搜索框高度
      this.offsetTop = searchHeight;
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      closeSuccess() {//关闭报名成功
        this.reload();
        this.showSuccess = false;
      },
      download() {//下载蓝聘
        window.location.href = "https://url.cn/5AUAFDU";
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      closeLoginModal() {
        this.showModal = 2;
      },
      openLogin() {
        this.showPage = 1;
      },
      openRegister() {
        this.showPage = 2;
      },
      sendCode() {
        let phone = this.registerPhone;
        if (checkPhone(phone)) {
          this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=0").then((res) => {
            let resultObj = res.data;
            if (resultObj.code == 0 && resultObj.data != null) {
              this.token1 = resultObj.data;
              this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=0" + "&userToken=" + this.token1).then((res) => {
                let resultObj = res.data;
                if (resultObj.code == 0) {
                  this.token2 = resultObj.data;
                  this.$refs.timerBtn.start(); //启动倒计时
                } else {
                  this.$vux.toast.text(resultObj.msg, "middle");
                  this.$refs.timerBtn.stop();
                }
              }).catch(function (error) {
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(function (error) {
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      openForgetPwd() {
        this.$router.push({path: "/forgetpwd", query: {"typePage": 1}});
      },
      proxyLogin() {//登录
        if (checkPhone(this.loginPhone) && checkPwd(this.loginPwd, 1)) {
          this.commonLogin(this.loginPhone, this.loginPwd);
        }
      },
      commonLogin(phone, pwd) {
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {"phone": phone, "password": md5(pwd), "type": 0, "upIdentity": this.identity};
        this.axios.post(baseUrl + "/login/login", data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.data == "null") {
            this.$vux.toast.text("用户名或密码错误", "middle");
            return;
          } else if (resultObj.data == "error") {
            this.$vux.toast.text("用户名或密码错误", "middle");
            return;
          } else {
            this.showModal = 2;
            let userArray = resultObj.data.split("#");
            setSessionStore("user_sign", Base64.encode(userArray[0]));
            this.reload();
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      affirmPwd() {
        let pwd1 = this.registerPwd1;
        let pwd2 = this.registerPwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      proxyRegister() {//注册
        let phone = this.registerPhone;
        let pwd1 = this.registerPwd1;
        let pwd2 = this.registerPwd2;
        let code = this.codeNum;

        if (checkPhone(phone) && checkCode(code) && checkPwd(pwd1, 2) && this.affirmPwd()) {
          this.$vux.loading.show({
            text: '加载中',
          });

          //校验验证码
          this.axios.get(baseUrl + "/login/mate_code?phone=" + phone + "&i=0&code=" + code + "&token=" + this.token2).then((res) => {
            let mateObj = res.data;
            if (mateObj.code == 0) {
              let data = {
                "phone": phone,
                "password": md5(pwd2),
                "type": 0,
                "upIdentity": this.identity,
                "origin": this.origin,
              };
              this.axios.post(baseUrl + "/login/add_user", data).then((res) => {//注册
                let resultObj = res.data;
                if (resultObj.code == 0 && resultObj.data == 0) {
                  let data = {"phone": phone, "password": md5(pwd2), "type": 0, "upIdentity": this.identity};
                  this.axios.post(baseUrl + "/login/login", data).then((res) => {
                    let resultObj = res.data;
                    this.$vux.loading.hide();
                    if (resultObj.data == "null") {
                      this.$vux.toast.text("用户名或密码错误", "middle");
                      return;
                    } else if (resultObj.data == "error") {
                      this.$vux.toast.text("用户名或密码错误", "middle");
                      return;
                    } else {
                      this.showModal = 2;
                      let userArray = resultObj.data.split("#");
                      setSessionStore("user_sign", Base64.encode(userArray[0]));
                      this.showSuccess = true;
                    }
                  }).catch(() => {
                    this.$vux.loading.hide();
                    this.$vux.toast.text("网络异常", "middle");
                  });
                } else {
                  this.$vux.loading.hide();
                  this.$vux.toast.text(resultObj.msg, "middle");
                }
              }).catch(() => {
                this.$vux.loading.hide();
                this.$vux.toast.text("网络异常", "middle");
              });
            } else {
              this.$vux.loading.hide();
              this.$vux.toast.text(mateObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      getIdentity() {
        if (getUrlKey("identity")) {//扫码进来的就取链接上面的identity
          setSessionStore("proxy_work_identity", getUrlKey("identity"));
        }

        if (getSessionStore("proxy_work_identity")) {
          this.identity = getSessionStore("proxy_work_identity");
        }
      },
      handleScroll() {//监听滚动条滚动距离
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= this.offsetTop) {
          this.isFixed = true;
        } else {
          this.isFixed = false;
        }
      },
      queryMechanism() {//查询所有行业
        this.axios.get(baseUrl + "/work/query_mechanismlist").then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.mechanismTypeList != null && resultObj.data.mechanismTypeList.length > 0) {
              this.mechanismList = resultObj.data.mechanismTypeList;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      onLoad() {
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryProxyWorkList();
            this.timer = null;
          }, 500)
        }
      },
      queryProxyWorkList() {//查询招工列表
        this.showToast = true;
        let area = this.address == "全国" ? "china" : this.address;
        this.axios.get(baseUrl + "/work/get_work_list?sgin=" + this.userSign + "&mechanismAddress=" + area + "&identity=" + this.identity + "&type=1" + "&mechanismName=" + this.mechanismName + "&mechanismTypeId=" + (this.mechanismType == 'all' ? '' : this.mechanismType) + "&workType=" + (this.workType == 2 ? '' : this.workType) + "&orderType=" + this.orderType + "&page=" + this.currentPage + "&size=" + this.pageSize + "&sginMark=" + this.sginMark).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {

            this.mobile = resultObj.data.phone;//客服
            this.weChatNum = resultObj.data.wxNum;//微信号

            if (resultObj.data.workList != null && resultObj.data.workList.length > 0) {//招工数据
              for (let i = 0, length = resultObj.data.workList.length; i < length; i++) {
                if (resultObj.data.workList[i].key != null && resultObj.data.workList[i].key != "") {
                  resultObj.data.workList[i].key = resultObj.data.workList[i].key.replace(/丨/g, "|").split("|");
                }
              }
              this.workList = this.workList.concat(resultObj.data.workList);

              this.loading = false;
              this.currentPage++;
            }
            else {
              this.loading = false;
              if (this.workList.length >= resultObj.data.workList.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
          this.showToast = false;
        }).catch(() => {
          this.showToast = false;
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openWorkDetail(id) {//招工详情
        setSessionStore("proxy_work_mark", 1);
        removeSessionStore("proxy_back_icon");
        this.$router.push({path: "/proxyworkdetail", query: {"workId": id}});
      },
      openSearchCity() {//城市搜索
        this.$router.push("/districtselect");
      },
      openSearchKey() {//企业名称搜索
        this.$router.push("/serachproxywork");
      },
      queryWorkType(key, val) {//按工种查询
        this.workType = key;
        this.screenTitle2 = val;
        this.initVanList();
        this.closePostModal();
      },
      selectMechanism(key, val) {//按企业查询
        this.mechanismType = key;
        this.screenTitle1 = val;
        this.initVanList();
        this.closeCompanyModal();
      },
      querySelectType(index) {//按选择条件查询
        if (this.screenMark) {
          this.screenMark = false;
          this.orderType = index;
        } else {
          if (this.orderType == index) {
            this.screenMark = true;
            this.orderType = "";
          } else {
            this.screenMark = true;
            this.orderType = index;
          }
        }
        this.initVanList();
      },
      openCompanyModal() {//打开全部企业筛选
        this.showScreen1 = false;
        this.showScreen2 = true;
        this.isFixed = true;
      },
      closeCompanyModal() {
        this.showScreen2 = false;
        this.isFixed = false;
      },
      openPostModal() {//打开工种筛选
        this.showScreen1 = true;
        this.showScreen2 = false;
        this.isFixed = true;
      },
      closePostModal() {
        this.showScreen1 = false;
        this.isFixed = false;
      },
      initVanList() {
        this.currentPage = 1;
        this.PageSize = 20;
        this.workList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    components: {
      "v-code": code
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .proxy-work-container
    wh(100%, auto)
    .proxy-work-search-box
      position: fixed
      top: 0
      z-index: 99
      display: flex
      align-items: center
      wh(100%, 1.2rem)
      background: #FFF
      .search-pic1
        margin-left: 3.2%
        wh(0.48rem, 0.48rem)
      .search-city
        padding-left: 0.107rem
        padding-right: 0.32rem
        size-color(0.413rem, #666)
      .search-con
        display: flex
        align-items: center
        flex: 1
        margin-right: 3.2%
        height: 0.8rem
        background: #F2F1F0
        border-radius(0.387rem)
        .search-pic2
          padding-left: 0.187rem
          padding-right: 0.253rem
          wh(0.48rem, 0.48rem)
        .search-name
          wh(80%, 0.6rem)
          size-color(0.373rem, #CCC)
          line-height: 0.6rem
    .proxy-work-box
      position: absolute
      top: 1.2rem
      wh(100%, auto)
      .roll-screen-box
        wh(100%, auto)
        .screen-condition-box
          position: relative
          fj(space-between, center)
          wh(100%, 1.04rem)
          .condition-title
            padding-left: 3.2%
            size-color(0.427rem, #333)
            font-weight: 500
          .condition-content
            display: flex
            margin-right: 3.2%
            .icon-box
              display: flex
              align-items: center
              size-color(0.387rem, #666)
              &:nth-child(1)
                margin-right: 0.4rem
              .screen-pic1
                margin-left: 0.213rem
                wh(0.267rem, 0.267rem)
            .choose
              color: #3CAFFF
          .company-modal
            position: absolute
            top: 1.04rem
            z-index: 99
            wh(100%, 7.733rem)
            background-color: rgba(0, 0, 0, 0.5)
            overflow-y: auto
            .screen-con
              wh(100%, auto)
              background: #FFF
              border-top: 0.027rem solid #f2f2f2
              .content-sec
                display: flex
                flex-direction: column
                wh(auto, 100%)
                margin-left: 0.48rem
                margin-right: 0.507rem
                .sec
                  display: flex
                  align-items: center
                  height: 1.067rem
                  line-height: 1.067rem
                  size-color(0.427rem, rgba(102, 102, 102, 1))
                  &:nth-child(1)
                    margin-top: 0.267rem
                  &:last-child
                    padding-bottom: 0.16rem
                .active2
                  color: $color
                .screen-pic2
                  margin-left: auto
                  wh(0.64rem, 0.64rem)
          .screen-modal
            position: absolute
            top: 1.04rem
            z-index: 99
            width: 100%
            background-color: rgba(0, 0, 0, 0.5)
            .screen-con
              wh(100%, auto)
              background: #FFF
              border-top: 0.027rem solid #f2f2f2
              .content-sec
                display: flex
                flex-direction: column
                wh(auto, 100%)
                margin-left: 0.48rem
                margin-right: 0.507rem
                .sec
                  display: flex
                  align-items: center
                  height: 1.067rem
                  line-height: 1.067rem
                  size-color(0.427rem, rgba(102, 102, 102, 1))
                  &:nth-child(1)
                    margin-top: 0.267rem
                  &:last-child
                    padding-bottom: 0.16rem
                .active2
                  color: $color
                .screen-pic2
                  margin-left: auto
                  wh(0.64rem, 0.64rem)
          .screen-cover-box1
            position: fixed
            top: 5.68rem
            left: 0
            right: 0
            bottom: 0
            z-index: 102
            background-color: rgba(0, 0, 0, 0.5)
          .screen-cover-box2
            position: fixed
            top: 9.947rem
            left: 0
            right: 0
            bottom: 0
            z-index: 102
            background-color: rgba(0, 0, 0, 0.5)
        .select-condition-box
          display: flex
          align-items: center
          margin: 0 auto
          wh(93.6%, 1.12rem)
          .select-key
            fj(center, center)
            flex: 1
            wh(100%, 0.8rem)
            background: #F2F1F0
            border-radius(0.08rem)
            size-color(0.373rem, #666)
            &:nth-child(2)
              margin-left: 0.133rem
            &:nth-child(3)
              margin-left: 0.133rem
              margin-right: 0.133rem
          .active
            color: #3CAFFF
      .roll-fixed-box
        position: fixed
        wh(100%, auto)
        top: 1.2rem
        z-index: 99
        background: #FFF
      .proxy-work-list-van
        wh(100%, auto)
        overflow: hidden
        .proxy-work-list-box
          display: flex
          flex-direction: column
          wh(100%, auto)
          .proxy-work-list-item
            display: flex
            wh(100%, 3.64rem)
            background: #FFF
            border-bottom: 0.027rem solid #f5f5f5
            .work-logo-box
              margin-top: 0.4rem
              margin-left: 3.2%
              .logo-con
                position: relative
                wh(2.133rem, 1.6rem)
                .logo-pic
                  wh(100%, 100%)
                  border-radius: 0.16rem
                .logo-title
                  position: absolute
                  bottom: 0
                  fj(center, center)
                  wh(100%, 0.48rem)
                  background: rgba(0, 0, 0, 0.5)
                  border-bottom-left-radius: 0.16rem
                  border-bottom-right-radius: 0.16rem
                  size-color(0.333rem, #FFF)
                .logo-full
                  position: absolute
                  top: 0
                  left: 0
                  fj(center, center)
                  wh(1.067rem, 0.373rem)
                  background: #ff8e59
                  border-radius(0.053rem)
                  size-color(0.293rem, #FFF)
                  font-weight: 500
              .star-box
                display: flex
                align-items: center
                wh(2.133rem, 0.32rem)
                margin-top: 0.56rem
                .star-pic
                  wh(0.32rem, 0.32rem)
                .star-score
                  padding-left: 0.16rem
                  size-color(0.34rem, rgba(250, 191, 72, 1))
                  font-weight: 500
            .work-item-con
              margin-left: 3.2%
              wh(69.6%, auto)
              .work-item-content1
                display: flex
                justify-content: space-between
                wh(100%, 1.12rem)
                padding-top: 0.4rem
                .company-box
                  display: flex
                  flex-direction: column
                  .company-name
                    padding-top: 0.05rem
                    padding-bottom: 0.19rem
                    size-color(0.4rem, #333)
                    font-weight: 500
                    width: 4.55rem
                    ellipsis()
                  .company-all-length
                    width: 6.95rem
                  .company-post
                    font-size: 0.373rem;
                    size-color(0.4rem, #3cafff)
                    font-weight: 500
                .prize-con-box1
                  position: relative
                  padding-top: 0.053rem
                  wh(2.16rem, 0.827rem)
                  .return-fee-pic
                    wh(2.16rem, 0.827rem)
                  .return-fee-num
                    position: absolute
                    fj(center, center)
                    top: 0
                    bottom: 0
                    left: 0.6rem
                    right: 0
                    margin: auto
                    size-color(0.347rem, rgba(255, 148, 69, 1))
                    font-weight: 500
                .prize-con-box2
                  position: relative
                  padding-top: 0.053rem
                  wh(2.333rem, 0.827rem)
                  .return-fee-pic
                    wh(2.333rem, 0.827rem)
                  .return-fee-num
                    position: absolute
                    fj(center, center)
                    top: 0
                    bottom: 0
                    left: 0.65rem
                    right: 0
                    margin: auto
                    size-color(0.347rem, rgba(255, 148, 69, 1))
                    font-weight: 500
              .work-item-content2
                padding-top: 0.253rem
                padding-bottom: 0.333rem
                height: 0.4rem
                display: flex
                align-items: center
                .work-num
                  size-color(0.32rem, rgba(153, 153, 153, 1))
                .work-money
                  margin-left: auto
                  size-color(0.4rem, rgba(255, 89, 89, 1))
                  font-weight: 500
              .work-item-content3
                display: flex
                align-items: center
                height: 0.4rem
                padding-bottom: 0.16rem
                .work-lend
                  text-align: center
                  line-height: 0.4rem
                  wh(1.147rem, 0.4rem)
                  background: #3cafff
                  border-radius: 0.053rem
                  size-color(0.293rem, #FFF)
                  margin-right: 0.1rem
                .work-sex
                  line-height: 0.4rem
                  padding-left: 0.1rem
                  padding-right: 0.1rem
                  height: 0.4rem
                  border: 1px solid rgba(60, 175, 255, 1)
                  border-radius: 0.053rem
                  size-color(0.293rem, #3cafff)
              .work-item-content4
                display: flex
                align-items: center
                .work-key
                  height: 0.4rem
                  line-height: 0.4rem
                  border-radius: 0.053rem
                  background: #F0F1F2
                  padding-left: 0.1rem
                  padding-right: 0.1rem
                  size-color(0.293rem, rgba(128, 128, 128, 1))
                  margin-right: 0.1rem
                  &:last-child
                    margin-right: 0
    .empty-wrap
      position: absolute
      top: 0
      bottom: 0
      left: 0
      right: 0
      margin: auto
      z-index: -1
      fj(center, center)
      wh(100%, auto)
      .empty-box
        display: flex
        flex-direction: column
        align-items: center
        wh(80%, auto)
        .empty-pic
          wh(4.773rem, 4.773rem)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
    .work-mask_transparent-toast
      position: fixed
      z-index: 1000
      top: 0
      right: 0
      left: 0
      bottom: 0
    .login-phone-cover
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
    .login-phone-modal
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 999
      .login-phone-box
        position: absolute
        left: 0
        top: 1.34rem
        right: 0
        margin: auto
        wh(8rem, auto)
        background: #FFF
        border-radius(0.16rem)
        box-sizing: border-box
        .phone-title1
          display: flex
          align-items: center
          justify-content: center
          wh(100%, 1.28rem)
          .login-title
            size-color(0.48rem, #999)
            height: 0.6rem
            line-height: 0.6rem
            margin-right: 0.96rem
          .register-title
            margin-left: 0.96rem
            height: 0.6rem
            line-height: 0.6rem
            size-color(0.48rem, #999)
          .active-mark
            color: #333
            font-weight: 500
            border-bottom: 0.053rem solid #3CAFFF
        .login-phone-con
          padding-top: 0.1rem
          margin: 0 auto;
          wh(6.933rem, auto)
          .forget-pwd
            display: flex
            justify-content: flex-end
            padding-bottom: 0.64rem
            size-color(0.373rem, rgba(60, 175, 255, 1))
        .register-phone-con
          padding-top: 0.1rem
          margin: 0 auto;
          wh(6.933rem, auto)
        .phone-title2
          fj(space-between, center)
          wh(100%, 0.96rem)
          margin-bottom: 0.213rem
          .title1
            padding-right: 0.1rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
          .title2
            size-color(0.427rem, rgba(51, 51, 51, 1))
            padding-left: 0.34rem
          .content
            display: flex
            align-items: center
            wh(4.907rem, 0.96rem)
            border: 0.027rem solid rgba(224, 224, 224, 1)
            border-radius(0.16rem)
            .code
              width: 58%
              padding-left: 0.1rem
              height: 0.6rem
              line-height: 0.6rem
              color: #666666
              font-size: 0.44rem

            .phone
              wh(80%, 0.6rem)
              padding-left: 0.1rem
              line-height: 0.6rem
              color: #666666
              font-size: 0.44rem
          .code_txt
            position: absolute
            right: 7.3%
            z-index: 2
            padding-left: 0.1rem
            padding-right: 0.1rem
            height: 0.9rem
            line-height: 0.9rem
            size-color(0.373rem, $color)
            font-weight: 500
            border: none
            background: #FFF
            border-radius(0.05rem)
        .phone-btn
          margin-top: 0.427rem
          margin-bottom: 0.427rem
          fj(center, center)
          wh(6.933rem, 1.067rem)
          border-radius: (0.16rem)
          background: rgba(60, 175, 255, 1)
          size-color(0.453rem, rgba(255, 255, 255, 1))
          font-weight: 500
        .close-box
          position: absolute
          bottom: -1.5rem
          left: 0
          right: 0
          margin: auto
          wh(0.8rem, 0.8rem)
    .success-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
      .success-box
        position: fixed
        top: 0
        left: 0
        right: 0
        bottom: 0
        z-index: 100
        margin: auto
        wh(8rem, 6.053rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .bg-box
          wh(100%, 2.107rem)
          .bg
            wh(100%, 100%)
        .title
          padding-top: 0.8rem
          padding-bottom: 0.627rem
          text-align: center
          size-color(0.453rem, rgba(60, 175, 255, 1))
          font-weight: 500
        .success-con
          margin: 0 auto
          wh(6.933rem, 2rem)
          background: rgba(245, 247, 250, 1)
          border-radius(0.133rem)
          margin-bottom: 0.8rem
          display: flex
          flex-direction: column
          justify-content: center
          .name
            margin-left: 0.427rem
            padding-bottom: 0.16rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
          .company
            width: 90%
            margin-left: 0.427rem
            padding-top: 0.16rem
            size-color(0.4rem, rgba(102, 102, 102, 1))
            ellipsis()
        .suc-btn
          fj(center, center)
          wh(6.933rem, 1.067rem)
          margin: 0 auto
          .detail
            line-height: 1.067rem
            text-align: center
            wh(6.933rem, 1.067rem)
            size-color(0.427rem, rgba(255, 255, 255, 1))
            background: rgba(60, 175, 255, 1)
            border-radius(0.16rem)
        .close
          position: absolute
          bottom: -1.5rem
          left: 0
          right: 0
          margin: auto
          wh(0.8rem, 0.8rem)
</style>
